<template>
	<view class="main">
		<navItem :navIndex="navIndex" @changeItem="changeItem" ref="childRef" />

		<indexPage v-if="navIndex==0" @changeItem="changeItem" @goVideoDetail="goVideoDetail" @goDetail="goDetail" />
		<distribution v-if="navIndex==1" @changeItem="changeItem" @goDetail="goDetail" :searchName="searchName"/>
	    <park v-if="navIndex==3" @changeItem="changeItem" @goDetail="goDetail"/>
		<videoDetail v-if="navIndex==5 && videoId" @changeItem="changeItem" :id1="videoId"  ref="videoDetail" @goDetail="goDetail"/>
		<videPage v-else-if="navIndex==5" @changeItem="changeItem" @goVideoDetail="goVideoDetail" />
		<contact v-if="navIndex==6" @changeItem="changeItem" />
	</view>
</template>

<script>
	export default {
		components: {
			navItem: () => import('./nav'),
			indexPage: () => import('./index_page'),
			distribution: () => import('./distribution'),
			videPage: () => import('./video'),
			videoDetail: () => import('./videoDetail'),
			   park: () => import('./park_page')  ,
			contact: () => import('./contact_page')
		},
		data() {
			return {
				navItems: [{
					name: '首页',
					selected: true,
					width: '29px'
				}, {
					name: '产业分布图',
					selected: false,
					width: '78px'
				}, {
					name: '厂房租售',
					selected: false,
					width: '68px'
				}, {
					name: '品质园区',
					selected: false,
					width: '68px'
				}, {
					name: '专精特新企业',
					selected: false,
					width: '98px'
				}, {
					name: '每日直播',
					selected: false,
					width: '68px'
				}, {
					name: '联系我们',
					selected: false,
					width: '68px'
				}],
				navIndex: 0,
				detailId: '',
				zhuanjingUrl: '',
				searchName: '',
				videoId: ''
			}
		},
		methods: {
			changeItem(index, url) {
				this.detailId = ''
				this.detailId = ''
				if (index == 4) {
					// this.zhuanjingUrl = url
					window.open(this.zhuanjingUrl, '_blank')
				} else {
					if (url && index == 1) {
						if (url.substr(0, 4) != 'http') {
							this.searchName = url
						}
					}

					this.navIndex = index
					// this.$refs.childRef.changeIndex(index)
					this.$forceUpdate()
				}
			}
			,
			goDetail(id) {
				this.detailId = id
				this.navIndex = 1
				this.videoId = ''
				console.log(' this.detailId ', this.detailId, this.navIndex)
			},
			goVideoDetail(id) {
				this.navIndex = 5
				this.videoId = id
				this.detailId = ''
				this.$refs.videoDetail.getId(id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
